<template>
  <div id="allMv">
    <div class="options">
      <p>
        <span
          @click="allOption.area = item"
          :class="allOption.area === item ? 'currentOption' : ''"
          v-for="item in areaOption"
          :key="item"
          >{{ item }}</span
        >
      </p>
      <p>
        <span
          @click="allOption.type = item"
          :class="allOption.type === item ? 'currentOption' : ''"
          v-for="item in typeOption"
          :key="item"
          >{{ item }}</span
        >
      </p>
      <p>
        <span
          @click="allOption.order = item"
          :class="allOption.order === item ? 'currentOption' : ''"
          v-for="item in orderOption"
          :key="item"
          >{{ item }}</span
        >
      </p>
    </div>
    <van-divider />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoadAllMv"
    >
    <Mvitem :mvList="allMvlist" />
    </van-list>
  </div>
</template>

<script>
import { getMvAll } from '@/api/mv.js'
import Mvitem from './Mvitem.vue'
import { Toast } from 'vant'
export default {
  name: 'AllMv',
  data () {
    return {
      areaOption: {
        全部: '全部',
        内地: '内地',
        港台: '港台',
        欧美: '欧美',
        日本: '日本',
        韩国: '韩国'
      },
      typeOption: {
        全部: '全部',
        官方版: '官方版',
        原生: '原生',
        现场版: '现场版',
        网易出品: '网易出品'
      },
      orderOption: {
        全部: '上升最快',
        官方版: '最热',
        原生: '最新'
      },
      allOption: {
        area: '全部',
        type: '全部',
        order: '上升最快'
      },
      page: 0,
      allMvlist: [], // 所有MV
      loading: false,
      finished: false
    }
  },
  components: {
    Mvitem
  },
  // 定义方法
  methods: {
    async onLoadAllMv () {
      try {
        this.page++
        const { data: res } = await getMvAll({
          area: this.allOption.area,
          type: this.allOption.type,
          order: this.allOption.order,
          limit: 10,
          offset: (this.page - 1) * 10
        })

        if (res.length) {
          this.allMvlist.push(...res)
          this.loading = false
        } else {
          this.finished = true
        }
      } catch (err) {
        Toast('加载失败~')
      }
    }
  },
  watch: {
    allOption: {
      deep: true,
      handler () {
        this.page = 0
        this.allMvlist = []
        this.onLoadAllMv()
      }
    }
  }
}
</script>

<style scoped lang="less">
#allMv {
  .options {
    margin: 5px 20px;
    padding: 5px 0;
    background-color: #fff;
    p {
      text-align: right;
      span {
        font-size: 14px;
        margin-right: 10px;
      }
      .currentOption {
        font-weight: 700;
        color: rgba(180, 25, 25, 0.979);
      }
    }
  }
  .van-divider {
    border-color: #c0c0c0;
  }
}
</style>
